import React,{useEffect, useState} from 'react'
import { Button, PageHeader, Modal, Form, Input, message } from 'antd';
import moment from 'moment';
import E from 'wangeditor'
import { ArticleAddApi, ArticleSearchApi,ArticleUpdateApi } from '../request/api'
import { useParams,useNavigate,useLocation } from 'react-router-dom';

let editor = null

export default function Edit() {

    const [content, setContent] = useState('')
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 自定义HOOK组件useForm
    const [form] = Form.useForm();
    const params = useParams();
    const [title, setTitle] = useState('')
    const [subTitle, setSubTitle] = useState('')
    const navigate = useNavigate()
    const location = useLocation()

    const showModal = () => {
        setIsModalVisible(true);
    };
    // 对话框点击了提交
    const handleOk = () => {
        // setIsModalVisible(false);//关闭对话框
        form
            .validateFields()    // validate校验   field字段
            .then((values) => {
                form.resetFields();   // reset重置
                // console.log('Received values of form: ', values);
                let {title, subTitle} = values;
                // 地址栏有id代表想要更新一篇文章
                if(params.id){
                    // 更新文章添加的请求
                    ArticleUpdateApi({title,subTitle,content,id:params.id}).then(res=>{
                        if(res.errCode === 0){
                            console.log(res)
                            message.success(res.message)
                            // 跳回列表页
                            navigate('/listlist')
                        } else {
                            message.error(res.message)
                        }
                        // 关闭对话框
                        setIsModalVisible(false);
                    })
                }else{
                    // 添加文章的请求
                    ArticleAddApi({title,subTitle,content}).then(res=>{
                        console.log(res);
                        if(res.errCode === 0){
                            console.log(res)
                            message.success(res.message)
                            // 跳回列表页
                            navigate('/listlist')
                        } else {
                            message.error(res.message)
                        }
                        // 关闭对话框
                        setIsModalVisible(false);
                    })
                }
                console.log(content)
                
            })
            .catch((info) => {
                console.log('提交失败',info);
            });
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 模拟componentDidMount
    useEffect(() => {
        editor = new E('#div1')
        editor.config.onchange = (newHtml) => {
            setContent(newHtml)
        }
        editor.create()

        // 根据地址栏做请求,id存在则进行请求
        if(params.id){
            ArticleSearchApi({ id: params.id }).then(res => {
                console.log(res);
                if(res.errCode === 0){
                    editor.txt.html(res.data.content) // 重新设置编辑器内容
                    setTitle(res.data.title)
                    setSubTitle(res.data.subTitle)
                }
            })
        }

        return ()=> {
            // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
            editor.destroy()
        }
    
    },[location.pathname])



    return (
        <div>
            <PageHeader
                ghost={false}
                // 有id则有返回箭头，没有id则没有返回箭头
                onBack={params.id ? () => window.history.back() : null}
                title="文章编辑"
                subTitle={"当前日期：" + moment(new Date()).format("YYYY-MM-DD")}
                extra={[
                    <Button key="1" type="primary" onClick={showModal}>
                    提交文章
                    </Button>,
                ]}
                >
                </PageHeader>
                {/* 富文本编辑器 */}
                <div id='div1' style={{ padding: '0 20px 20px', background: '#fff' }}></div>
                <Modal zIndex={99999} title="填写文章标题" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
                okText="提交" cancelText="取消">
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 21 }}
                        autoComplete="on"
                        initialValues={{ title, subTitle }}
                        >
                        <Form.Item
                            label="标题"
                            name="title"
                            rules={[{ required: true, message: '请填写标题' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="副标题"
                            name="subTitle"
                        >
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
        
        </div>
    )
}
